작업의 진행률을 나타낸다.
구문 콘텐츠(phrasing-content)가 예상되는 위치
하위에 다른 <progress> 요소가 없어야 한다.
[Exposed=Window]
interface HTMLProgressElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute double value;
[CEReactions] attribute double max;
readonly attribute double position;
readonly attribute NodeList labels;
};<progress></progress>
<progress> 요소는 어떠한 작업의 진행률을 표시한다. 웹 프로그래밍은 네트워크를 통한 데이터 처리를 하는 것이 대부분이므로 다양한 상황을 고려해서 작업이 진행되는 상태를 피드백하는 게 좋다.
<progress> 요소만으로 진행률 표시를 할 수 없다. 자바스크립트를 통해 요청에 대한 처리 상태을 캐치해서 진행률 표시에 필요한 값을 연산한다. 그리고 해당 HTMLProgressElement 요소의 value 프로퍼티를 즉각 업데이트하여 시각적 표시를 한다.
<progress> 태그가 추가되기 전에는 직접 진행률 표시기를 만들어 CSS의 속성을 통해 진행률을 시각적으로 표현했다. 이제 <progress> 태그가 추가되면서 좀더 빠른 개발이 가능해졌지만 한편으로는 다양한 진행률 표시기를 개발하는 것이 선택사항이 되어 버렸다.
입력 요소의 기본 값을 지정한다.
정적인 값이 아닌 자바스크립트에 의하여 동적인 값으로 업데이트한다. value 애트리뷰트 값을 지정할 수 없는 작업인 경우에는 비교 가능한 진행률이 아닌 예상 시간을 알 수 없는 처리중임을 표시한다.
작업에 필요한 총 작업량을 지정한다. 즉 작업 완료의 기준이 되는 값이어야 한다.
일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.
일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.